<template>
	<div class="typeNav">
		<ul>
			<li>
				<a @click="showProducts('normal')">
					<img src="@/assets/picture/typeicon1.png" />
					<p>普通商品</p>
				</a>
			</li>
			<li>
				<a @click="showProducts('spike')">
					<img src="@/assets/picture/typeicon8.png" />
					<p>抢购秒杀</p>
				</a>
			</li>
		</ul>
	</div>
	<div class="likebox">
		<ul>
			<li v-for="(product, index) in displayedProducts" :key="index">
				<router-link :to="{ path: `/xq/${product.id}`, query: { is_sale: product.is_sale } }">
					<img src="@/assets/picture/22.png" class="proimg" />
					<p class="tit">{{ product.name }}</p>
					<p class="price">￥{{ product.price }}<img src="@/assets/picture/f3.png" /></p>
				</router-link>
			</li>
		</ul>
	</div>
	<div v-if="tip" class="tip-layer">
		<div class="tip">{{tipContent}}</div>
	</div>
	<div class="fbox"></div>
	<Footer />
</template>

<script>
	import Footer from '@/components/footer/index.vue'
	import axios from 'axios';
	import {
		showTips
	} from '@/assets/js/common.js';
	export default {
		name: 'index',
		components: {
			Footer
		},
		props: {
			msg: String
		},
		data() {
			return {
				httpUrl: 'http://qgm1.fengjian123.com/service9501/',
				ProductListNormal: [],
				ProductListSpike: [],
				displayedProducts: [],
				tipContent: '',
				tip: 0,
			};
		},
		mounted() {
			this.getIndexProduct();
		},
		methods: {
			async getIndexProduct() {
				axios.post(this.httpUrl + 'index/getIndexProduct')
					.then(res => {
						if (res.data.err == 0) {
							const productCate = window.sessionStorage.getItem('productCate');
							const responseData = res.data.productList;
							this.ProductListNormal = responseData['normal'];
							this.ProductListSpike = responseData['spike'];
							if (productCate === "spike") {
								this.displayedProducts = responseData['spike'];
							} else {
								this.displayedProducts = responseData['normal'];
							}
						} else {
							console.error(res.data.msg);
							showTips(this, res.data.msg);
						}
					})
					.catch(error => {
						console.error("获取商品失败，请检查网络", error);
						showTips(this, '获取商品失败，请检查网络');
					});
			},
			showProducts(type) {
				if (type === 'spike') {
					this.displayedProducts = this.ProductListSpike;
					sessionStorage.setItem('productCate', 'spike');
				} else {
					this.displayedProducts = this.ProductListNormal;
					sessionStorage.setItem('productCate', 'normal');
				}
			}
		},
	}
</script>

<style>
	@import url('@/assets/css/style.css');
</style>